<template>
  <div class="sidebar">
    <!-- 使用 t('chat.chatTitle') 获取翻译文本 -->
    <div class="sidebar-header">{{ t('chat.chatTitle') }}</div>
    <div class="sidebar-body">
      <el-scrollbar class="sidebar-scroll">
        <router-link
          v-for="chat in chatList" :key="chat.id"
          :class="['chat-item', activeLink.includes(`${chat.id}`) && 'active']"
          :to="`/home/myConf/asistant/${chat.id}`"
        >
          <span>{{ chat.name }}</span>
          <span class="chat-time">{{ chat.createdAt }}</span>
          <div class="delete-btn" ></div>
        </router-link>
      </el-scrollbar>
    </div>
    <div class="sidebar-footer">  
      <!-- 使用 t('chat.chatNewConversation') 获取翻译文本 -->
      <el-button class="add-chat-btn" @click="addNewChat">{{ t('chat.chatNewConversation') }}</el-button>
    </div>
  </div>
</template>
  <script setup lang="ts">
  import { t } from '../../locales' // 引入全局 i18n
  import {ref} from 'vue'
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route=useRoute()
  const chatList = ref([{ id: 1, name: '默认对话', createdAt: '2025/3/6' },{ id: 2, name: '默认对话', createdAt: '2025/3/6' }]);
const activeLink=computed(()=>route.path)
const addNewChat=()=>{
  const newChat = { id: Date.now(), name: '新对话', createdAt: '刚刚' };
  chatList.value.push(newChat)

}
  </script>
  
  <style scoped lang="scss">
  .sidebar {
    padding: 20px;
    width: 100%;
    height: 100%;
    // 确保 padding 和 border 不会影响元素的总宽度
    box-sizing: border-box;
    background: linear-gradient(to bottom,#32e3ea, #6383fc);
    display: flex;
    flex-direction:column ;
    box-shadow: inset -2px 0 2px 0 rgba(0,0,0,5%);
    position: relative;
    transition: width ease .1s;
    // 确保左上角和左下角是圆角
    border-radius: 32px 0 0 32px;
    .sidebar-header{
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        margin: 20px 0px;
        color: #0055be;
    }
    .sidebar-body {
      .sidebar-scroll{
        max-height: 65vh;
        overflow: auto;
      }
    flex: 1;
    .chat-item{
      text-decoration: none;
      background-color: white;
      padding: 10px 14px;
      border-radius: 10px;
      margin-bottom: 10px;
      box-shadow: var(0px 2px 4px 0px rgb(0, 0, 0, 0.05));
      transition: background-color .3s ease;
      cursor: pointer;
      border: 2px solid rgba(0, 0, 0, 0);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      user-select: none;
      color: black;
      &:hover{
        background-color: #efeded;
      }
.chat-time{
  color: #a6a6a6;
    font-size: 12px;
    margin-top: 8px;
}
.delete-btn::before {
    content: '×'; /* 设置伪元素的内容为一个叉叉符号 */
    font-size: 18px; /* 设置叉叉符号的字体大小 */
}
.delete-btn{
  position: absolute;
  right: 1%;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1px;
  color: white;
  opacity: 0;
  transition: opacity .3s ease,transform .3s ease;
  transform: translateY(-50%) translateX(20px);
}

    }
    .active {
    border: 2px solid blueviolet;
}

.chat-item.active:hover .delete-btn {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}
}
.sidebar-footer {
width: 100%;
margin-top: auto;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 0 !important;

.add-chat-btn {
  width: 100%;
    margin:0 !important;
    padding: 10px;
    color: black;
    background-color: white;
    border: none;
    border-radius: 10px;
    min-width: 0;
}

}
}
  </style>
  